<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>触屏手指滑动计算演示--程序员老刘</title>
</head>
<body>
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
    body, html {
        margin: 0px;
        padding: 0px;
    }

    #myCanvas {
        border: 1px solid #c3c3c3;
        display: block;

    }

    #tete {
        width: 300px;
        height: 30px;
    }

</style>
canvas需要回车才能出来？
<canvas id="myCanvas" width="400" height="300">
    <!--onmousemove="cnvs_getCoordinates(this)" onmouseout="cnvs_clearCoordinates()"-->
    Your browser does not support the canvas element.
</canvas>
<div id="aa"></div>
<div id="cc"></div>
<div id="tete"></div>

<div id="layer">
    测试原生层级的div
    <div>第二层</div>
    <nav>
        <a>第一个</a>
        <a>又一个</a>
        <a>第三个</a>
    </nav>
    <input type="radio" name="rad" value="11111" id="rad1">单选1
    <input type="radio" name="rad" value="22222" id="rad2">单选2
    <input type="checkbox" name="rad">aaa
    <button>试一下</button>
</div>


<script type="text/javascript" id="isscript">
    /*原生获取子元素*/
    var la = document.getElementById('layer');
    console.log(la.childNodes);
    console.log(document.getElementsByTagName('input:[checkbox]'));

    var i = 50;
    function aaaa() {
        document.getElementById('tete').style.backgroundColor = 'rgb(26,' + i + ',26)';
        i++;
        if (i >= 255) {
            clearInterval(aaa);
        }
    }
    var aaa = setInterval(aaaa, 10);


    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    var img = new Image();
    img.src = "http://www.w3school.com.cn/i/eg_flower.png";
    cxt.drawImage(img, 0, 0);

    function cnvs_getCoordinates(e) {
        var x = event.clientX;
        var y = event.clientY;
        //var say = document.all("coords");
        //say.innerText = "X:" + x + " Y:" + y;
        //document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
    }
    function cnvs_clearCoordinates() {
        document.getElementById("xycoordinates").innerHTML = "";
    }

    function load() {
        document.getElementById('myCanvas').addEventListener('touchstart', touch, false);
        document.getElementById('myCanvas').addEventListener('touchmove', touch, false);
        document.getElementById('myCanvas').addEventListener('touchend', touch, false);
        //console.log(document.all);
    }

    function touch(event) {
        var event = event || window.event;
        var cc = document.getElementById("cc");
        var aa = document.getElementById("aa");

        switch (event.type) {
            case "touchstart":
                aa.innerText = event.touches.length;
                cc.innerText = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
            case "touchend":
                aa.innerText = event.touches.length;
                cc.innerText = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault();
                cc.innerText = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                mycanvas.style.left = event.touches[0].clientX + 'px';
                mycanvas.style.top = event.touches[0].clientY + 'px';
                break;
        }
    }
    window.addEventListener('load', load, false);

</script>

</body>
</html>

